<template>
	<!-- 导航按钮组件 -->
	<view
		:style="{marginTop:`${newData.pageUpSpacing}rpx`,marginBottom: `${newData.pageDownSpacing}rpx`,paddingLeft:`${newData.pageLRSpacing}rpx`,paddingRight: `${newData.pageLRSpacing}rpx`}">
		<view class="nav_button" :style="{ backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background,
		    border: `4rpx solid ${newData.borderColor}`, height: `${newData.height}rpx`}"
			:class="(newData.background ? newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-' + thememobile.backgroundColor)+' col-'+newData.navButtons.length">
			<view class="flex-sub text-center" v-for="(item,index) in newData.navButtons" :key="index">
				<div-base-navigator :pageUrl="item.pageUrl" hover-class="none">
					<image :src="item.imageUrl"
						:style="{width:`${newData.imgSize}rpx`,height: `${newData.imgSize}rpx`}"></image>
					<view :style="{color: `${newData.textColor}`,fontSize:`${newData.textSize}rpx`, fontWeight: `${newData.textBold == '1' ? 400 : 700}`}">
						{{item.navName}}
					</view>
				</div-base-navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	const app = getApp();
	export default {
		props: {
			value: {
				type: Object,
				default: () => {
					return {
						rowNum: 4,
						height: 100,
						pageUpSpacing: 20,
						pageDownSpacing: 20,
						pageLRSpacing: 0,
						textColor: '#333333',
						borderColor: '#fff',
						textSize: 32,
						imgSize: 40,
						navButtons: []
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
			};
		},
		methods: {
			jumpPage(page) {
				if (page) {
					uni.navigateTo({
						url: page
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 导航 */
	.nav_bt_img {
		// width: 80rpx !important;
		// height: 80rpx !important;
	}

	.nav_button {
		display: flex;
		align-items: center;
		border-radius: 15rpx;
	}
</style>